<template>
  <el-form
    label-position="right"
    :rules="rules"
    ref="ruleFormRef"
    label-width="70"
    :model="addList"
    class="demo-form-inline"
  >
    <el-form-item label="id" prop="id">
      <el-input v-model="addList.id" placeholder="请输入id" clearable />
    </el-form-item>
    <el-form-item label="商品" prop="name">
      <el-input v-model="addList.name" placeholder="请输入商品名称" clearable />
    </el-form-item>
    <el-form-item label="规格" prop="specification">
      <el-input
        v-model="addList.specification"
        placeholder="请输入规格"
        clearable
      />
    </el-form-item>
    <el-form-item label="单价" prop="price">
      <el-input v-model="addList.price" placeholder="请输入价格" clearable />
    </el-form-item>
    <el-form-item label="数量" prop="num">
      <el-input v-model="addList.num" placeholder="请输入数量" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button plain @click="reset()">清空</el-button>
    </el-form-item>
  </el-form>
  <el-button @click="get">g请求</el-button>
  <el-button @click="post">p请求</el-button>
  <div>{{ res1 }}</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
function get() {
  axios
    .get("https://v.api.aa1.cn/api/api-wenan-anwei/index.php?type=json")
    .then((res) => {
      console.log(res);
      res1.value=res.data.anwei
    })
    .catch((err) => {
      console.log(err);
    });
}
const res1=ref()
const ruleFormRef = ref(null);
const addList = reactive({
  id: null,
  name: "",
  specification: [],
  price: "",
  num: "",
});
const rules = reactive({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  num: [
    { required: true, message: "请输入数量", trigger: "blur" },
    { min: 1, message: "请输入正确的数值", trigger: "blur" },
  ],
});

const submit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) alert("成功");
    else alert("失败");
  });
};

function reset() {
  ruleFormRef.value.resetFields();
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>